<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    canvas{
        border: 1px solid red;
    }
</style>
<body>
    <canvas width="500" height="500" id="mycanvas"></canvas>
    <script>
        let arr = ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661409359&t=b3256fb92b939f18d5280ed0bad2baa2',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661409359&t=216d38f48e68cce7db6be2bf5a42ae03',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661409359&t=b1751d4dfd0abaceddab2c5de959a9ab'  
        ]

        // 预加载: 不能控制加载的顺序
        // function loadImg(arr,cb){
        //     let count = 0;
        //     let imgarr = [];
        //     arr.forEach(src=>{
        //         let imgEle = new Image();
        //         imgEle.src = src;
        //         imgEle.onload = function(){
        //             count++;
        //             imgarr.push(this);
        //             if(count >= arr.length){
        //                 cb(imgarr);
        //             }
        //         }
        //     })
        // }



            let obj = {bg1:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242332225H9-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661409359&t=b3256fb92b939f18d5280ed0bad2baa2',
        bg2:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661409359&t=216d38f48e68cce7db6be2bf5a42ae03',
        bg3:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661409359&t=b1751d4dfd0abaceddab2c5de959a9ab'
        }

        function loadImg(obj,cb){
            return new Promise((resolve)=>{
                let length = 0;
                for(let key in obj){
                    length++;
                }
                console.log('对象的长度', length);
                let count = 0;
                // 循环加载对象里的图片
                let resObj = {};
                for(let k in obj){
                    console.log(k);
                    let imgEle = new Image();
                    imgEle.src = obj[k];
                    imgEle.onload = function(){
                        count++;
                        resObj[k]=this;
                        if(count>=length){
                            cb && cb(resObj);
                            resolve(resObj);
                        }
                    }
                }
            })
        }

        let canvas = document.querySelector('#mycanvas');

        let context = canvas.getContext('2d');
        // loadImg(obj,function(resObj){
        //     context.drawImage(resObj['bg1'],0,0,100,100);
        //     context.drawImage(resObj['bg1'],100,100,100,100);
        //     context.drawImage(resObj['bg1'],200,200,100,100);
        // })




        loadImg(obj).then(resObj=>{
            context.drawImage(resObj['bg1'],0,0,100,100);
            context.drawImage(resObj['bg2'],100,100,100,100);
            context.drawImage(resObj['bg3'],200,200,100,100);
        })






    </script>
</body>
</html>